<template>
	<view>
		<view class="search align-center justify-center flex">
			<view class="top-search flex align-center justify-between">
				<input placeholder="搜索你想要的商品" confirm-type="search" v-on:click="toInputSearch"  @confirm="toInputResult" v-model="searchKey" />
				<text class="lg text-gray cuIcon-search"></text>
			</view>
			<text class="search_btn">搜索</text>
		</view>
		<!-- <image class="banner" src="/static/banner.png"></image> -->
		<!-- <image class="banner" :src="dyadroollist[0].img_url"></image> -->
		<swiper interval="2000" indicator-dots="true" autoplay="true">
			<swiper-item v-for="(item,index) in dyadroollist">
				<image class="banner" :src="item.img_url" @tap="toBunnerUrl(item)"></image>
			</swiper-item>
		</swiper>
		<view class="index-nav flex align-center justify-around">
			<block v-for="(item,index) in selectList">
				<view class="index-nav-item flex align-center flex-direction justify-center" @tap="toSearchList(item)">
					<image :src="item.img_url" mode="aspectFit"></image>
					<text>{{item.title}}</text>
				</view>
			</block>
			<!-- <view class="index-nav-item flex align-center flex-direction justify-center" @tap="toSearch('水果')">
				<image src="/static/a4.png"></image>
				<text>水果</text>
			</view>
			<view class="index-nav-item flex align-center flex-direction justify-center" @tap="toSearch('粮油')">
				<image src="/static/a3.png"></image>
				<text>粮油</text>
			</view>
			<view class="index-nav-item flex align-center flex-direction justify-center" @tap="toSearch('调味品')">
				<image src="/static/a2.png"></image>
				<text>调味品</text>
			</view> -->
			<view class="index-nav-item flex align-center flex-direction justify-center" @tap="toMore">
				<image src="/static/a1.png"></image>
				<text>更多</text>
			</view>
		</view>
		<view class="recommend flex flex-direction">
			<view class="recommend-title flex align-center justify-between">
				<text>新品推荐</text>
				<view>
					<text @tap="toRedGoodsListMore">更多</text>
					<text class="lg cuIcon-right" @tap="toRedGoodsListMore"></text>
				</view>
			</view>
			<view class="recommend-con flex align-center">
				<block v-for="(item,index) in redGoodsList" v-if="index<=3">
					<view  style="margin: 10rpx;" class="recommend-item flex flex-direction" @tap="toGoodsDetail(item)">
						<image class="recommend-img2" :src="item.img_url" mode="aspectFit"></image>
						<text>{{item.title}}</text>
						<view class="recommend-bto flex align-center justify-between">
							<text class="text-price">{{item.price}}</text>
							<view class="flex align-center justify-center">
								<text class="lg cuIcon-cart"></text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="content">
			<view class="recommend-title flex align-center justify-between">
				<text>优惠专区</text>
				<view>
					<text @tap="toRedGoodsListMore">更多</text>
					<text class="lg cuIcon-right" @tap="toRedGoodsListMore"></text>
				</view>
			</view>
			<view class="recommend-con flex align-center justify-between flex-wrap">
				<block v-for="(item,index) in activeGoodsList">
					<view class="recommend-item flex flex-direction" @tap="toGoodsDetail(item)">
						<image class="recommend-img1" :src="item.img_url" mode="aspectFit"></image>
						<text>{{item.title}}</text>
						<view class="recommend-bto flex align-center justify-between">
							<text class="text-price">{{item.price}}</text>
							<view class="flex align-center justify-center">
								<text class="lg cuIcon-cart"></text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				refreshing: false,
				title: 'Hello',
				redGoodsList: [],
				activeGoodsList: [],
				dyadroollist: [],
				searchKey: '',
				selectList: [],
			}
		},
		onLoad() {
			this.loadSwiper()
			this.loadRedGoodsList()
			this.loadActiveGoodsList()
			this.loadAllGoodsCategory()

		},
		onReachBottom() {
			console.log('滑动到页面底部')
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.refreshing = true;
			
			this.loadRedGoodsList()
			this.loadActiveGoodsList()
			this.loadAllGoodsCategory()
			this.loadSwiper()
		},
		methods: {
			/**
			 * 加载新品推荐
			 */
			loadRedGoodsList: function() {
				uni.showLoading({
					title:'加载中...'
				})
				api.get({
					url: 'Goods/GetRedGoodsList',
					data: {
						page: 1,
						pagesize: 15
					},
					success: data => {
						uni.hideLoading()
						console.log(data);
						if (data.ErrCode == 0) {
							this.redGoodsList = data.Response
						}
					}
				});
			},
			/**
			 * 加载优惠专区
			 */
			loadActiveGoodsList: function() {
				uni.showLoading({
					title:'加载中...'
				})
				api.get({
					url: 'Goods/GetActiveGoodsList',
					data: {
						page: 1,
						pagesize: 15
					},
					success: data => {
						uni.hideLoading()
						console.log(data);
						if (data.ErrCode == 0) {
							this.activeGoodsList = data.Response
						}
					}
				});
			},
			/**
			 * 加载优惠专区
			 */
			loadSwiper: function() {
				api.get({
					url: 'Website/GetindexList',
					data: {
						page: 1,
						pagesize: 15
					},
					success: data => {
						console.log(data);
						if (data.ErrCode == 0) {
							this.dyadroollist = data.Response.dyadroollist
						}
						this.refreshing = false;
						uni.stopPullDownRefresh();
					}
				});
			},
			loadAllGoodsCategory: function() {
				uni.showLoading({
					title:'加载中...'
				})
				api.get({
					url: 'Goods/GetAllGoodsCategoryList',
					data: {},
					success: data => {
						uni.hideLoading()
						console.info('loadAllGoodsCategory:'+JSON.stringify(data))
						if (data.ErrCode == 0) {
							// this.selectList = data.Response
							if(this.selectList.length<=0 || this.selectList[0].id != data.Response[0].id){
								for (var i = 0; i < data.Response.length; i++) {
									this.selectList.push(data.Response[i])
									if (this.selectList.length == 4) break;
								}
							}
						}
					}

				});
			},
			/**
			 * 跳转到商品详情
			 */
			toGoodsDetail: function(item) {
				console.log(item);
				uni.navigateTo({
					url: "/module/good/goodsDetails/goodsDetails?id=" + item.id
				});
			},
			/**
			 * 跳转更多
			 */
			toMore: function() {
				console.log('toMore')
				uni.switchTab({
					url: '/pages/allCategories/allCategories'
				});
			},
			/**
			 * 跳转到关键词
			 */
			toSearch: function(search) {
				// uni.switchTab({
				// 	url:'/pages/allCategories/allCategories'
				// });
				console.log(search)
				uni.navigateTo({
					url: '/module/good/goodsList/goodsList?key=' + search
				});
				// uni.navigateTo({
				// 	url:'/pages/goodsSearchResult/goodsSearchResult?key='+search
				// }); 
			},
			/**
			 * 跳转到关键词
			 */
			toSearchList: function(item) {
				// uni.switchTab({
				// 	url:'/pages/allCategories/allCategories'
				// });
				console.log(item)
				uni.navigateTo({
					url: '/module/good/goodsList/goodsList?category_id=' + item.id
				});
				// uni.navigateTo({
				// 	url:'/pages/goodsSearchResult/goodsSearchResult?key='+search
				// }); 
			},
			/**
			 * 跳转到新品推荐更多
			 */
			toRedGoodsListMore: function() {
				console.log('toRedGoodsListMore')
				uni.navigateTo({
					url: '/module/good/hotCommodity/hotCommodity'
				});
			},
			/**
			 * 跳转到轮播指定地址
			 */
			toBunnerUrl: function(item) {
				console.log('toBunnerUrl' + JSON.stringify(item))
				// location.href = 'https:/www.baidu.com'
				uni.navigateTo({
					url: '/pages/myBanner/myBanner?key=' + item.url
				});
			},
			toInputResult: function() {
				uni.navigateTo({
					url: "/module/good/goodsSearchResult/goodsSearchResult?key=" + this.searchKey
				})
			},
			toInputSearch: function() {
				uni.navigateTo({
					url: "/module/good/goodsSearch/goodsSearch" 
				})
			}


		}
	}
</script>

<style>
	.content {
		margin-top: 20upx;
		background-color: #fff;
		padding: 0 30upx;
	}
	.recommend-bto>view {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		background-color: #fde1e1;
	}
	.recommend-bto>view>text {
		color: #f03737;
		font-size: 20upx;
	}
	.recommend-bto>text {
		font-size: 30upx;
		color: #f03737;
	}
	.recommend-img1 {
		width: 330upx;
		height: 330upx;
	}
	.recommend-img2 {
		width: 160upx;
		height: 160upx;
	}
	.recommend-item>text {
		font-size: 22upx;
		color: #666666;
		margin-top: 6upx;
	}
	.recommend-item {
		margin-bottom: 24upx;
	}
	.recommend {
		margin-top: 20upx;
		background-color: #fff;
		padding: 0 30upx 0 30upx;
		box-sizing: border-box;
	}
	.recommend-title {
		height: 68upx;
	}
	.recommend-title>view>text {
		font-size: 24upx;
		color: #999999;
	}
	.recommend-title>text {
		font-size: 30upx;
		color: #333333;
		font-weight: 500;
	}
	.index-nav-item image {
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
	}
	.index-nav-item text {
		font-size: 24upx;
		color: #333333;
		margin-top: 10upx;
	}
	.index-nav {
		width: 100%;
		height: 160upx;
		background-color: #fff;
	}
	.search input {
		width: 630upx;
		height: 40upx;
		background-color: #ffffff;
		border-radius: 20upx;
		padding-left: 30upx;
		box-sizing: border-box;
	}
	.search {
		height: 80upx;
		background-color: #8f3671;
	}
	.search>.search_btn{
		color:#fff;
		margin-left:20upx;
	}
	.banner {
		width: 100%;
		height: 300upx;
	}
	.top-search{
			width: 598upx;
			height: 56upx;
			background-color: #ffffff;
			border-radius: 27upx;
			border: solid 1upx #dddddd;
			padding: 0 26upx;
			box-sizing: border-box;
			
	}
	.cuIcon-search{
		position: absolute;
	}
	.top-search{
		font-size:24upx;
	}
</style>
